<template>
    <div :class="`bigScreen ${screenStatus ? 'full' : ''}`" :style="`width:${isCollapse ? 1870 : 1720}px`">
        <el-card class="main-card">
            <div class="flex-between">
                <div style="width: calc(100% - 550px); margin-right: 30px">
                    <el-card class="chart-card top-card" shadow="never">
                        <div slot="header" class="card-header">设备状态</div>
                        <div class="flex-between">
                            <div ref="pieChart" style="width: 400px; height: 265px"></div>
                            <div ref="pietable" style="width: 700px; height: 265px">
                                <el-table v-loading="loading" :data="deviceList" :border="false">
                                    <el-table-column label=" " align="center" header-align="center" prop="index" width="100">
                                        <template v-slot="{ row }">
                                            <i class="table-color" :style="`background-color:${colorList[row.index]};`"></i>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="设备状态" align="left" header-align="left" prop="status" min-width="120" />
                                    <el-table-column label="设备数量" align="left" header-align="left" prop="num" min-width="120" />
                                    <el-table-column label="设备占比" align="left" header-align="left" prop="desc" min-width="120" />
                                </el-table>
                            </div>
                        </div>
                    </el-card>
                </div>
                <div style="width: 520px">
                    <el-card class="chart-card top-card" shadow="never">
                        <div slot="header" class="card-header">常用功能</div>
                        <div class="flex-between public-use">
                            <div class="use-option" v-for="(item, index) in useList" :key="index">
                                <el-image style="width: 40px; height: 40px" :src="require(`@/assets/images/bigScreen/use-icon0${index + 1}.png`)"></el-image>
                                <div class="use-label">{{ item }}</div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </el-card>
        <el-card class="chart-card center-list" shadow="never">
            <el-tabs v-model="activeStatus">
                <el-tab-pane label="代办事项统计" name="all"></el-tab-pane>
                <!-- <el-tab-pane label="我的代办事项" name="my"></el-tab-pane> -->
            </el-tabs>
            <div class="flex-between agency-matter">
                <div class="agency-option" v-for="(item, index) in agencyList" :key="index" :style="(index + 1) % 6 == 0 ? ' margin-right:0;' : ''">
                    <div class="agency-label">{{ item.name }}</div>
                    <div class="agency-num">{{ item.value }}（个）</div>
                </div>
            </div>
        </el-card>
        <el-card class="chart-card center-card" shadow="never">
            <div slot="header" class="card-header">工单保修</div>
            <div style="display: flex">
                <div ref="repairChart" style="width: 400px; height: 265px"></div>
                <div class="flex-between" style="width: 70px; margin: 20px 100px; flex-direction: column">
                    <div class="flex-between" v-for="(item, index) in repairList" :key="index">
                        <i class="table-color" :style="`background-color:${colorList[index]};margin-right:8px;`"></i>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="flex-between repair-order" style="width: 1008px; height: 265px">
                    <div class="repair-option" v-for="(item, index) in repairOrderList" :key="index" :style="index < 4 ? ' margin-bottom:20px;' : ''">
                        <el-image style="width: 48px; height: 48px; margin-right: 8px" :src="require(`@/assets/images/bigScreen/status-icon0${index + 1}.png`)"></el-image>
                        <div class="repair-content">
                            <div class="repair-label">{{ item.name }}</div>
                            <div class="repair-num">{{ item.value }}</div>
                        </div>
                    </div>
                    <div class="repair-option"></div>
                </div>
            </div>
        </el-card>
        <el-card class="chart-card bottom-chart" shadow="never">
            <div slot="header" class="card-header">巡检</div>
            <div class="date-type">
                <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getList">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                </el-radio-group>
            </div>
            <div ref="deviceChart" style="width: 100%; height: 306px"></div>
        </el-card>
        <el-card class="main-card">
            <div class="flex-between" style="height: 370px">
                <el-card class="chart-card bottom-chart" style="width: calc(50% - 10px)" shadow="never">
                    <div class="date-type">
                        <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getList">
                            <el-radio-button label="1">日</el-radio-button>
                            <el-radio-button label="2">月</el-radio-button>
                            <el-radio-button label="3">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div slot="header" class="card-header">保养</div>
                    <div ref="lineChart" style="width: 100%; height: 306px"></div>
                </el-card>
                <el-card class="chart-card bottom-chart" style="width: calc(50% - 10px)" shadow="never">
                    <div class="date-type">
                        <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getList">
                            <el-radio-button label="1">日</el-radio-button>
                            <el-radio-button label="2">月</el-radio-button>
                            <el-radio-button label="3">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div slot="header" class="card-header">维修</div>
                    <div ref="barChart" style="width: 100%; height: 306px"></div>
                </el-card>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getStatisticNew, selectMaintainTasksDaoVoApi, devOpsTaskAjaxApi, getOperationsituation } from '@/views/maintain/api/maintain/device';
import { mapGetters } from 'vuex';
import * as echarts from 'echarts';
export default {
    name: 'bigScreen',
    data() {
        return {
            loading: false,
            colorList: ['#165DFF', '#14C9C9', '#F7BA1E', '#A3D12E', '#FA9134', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            screenStatus: false,
            lineType: '1',
            barType: '1',
            lineResouce: {},
            barResouce: {},
            pie_chart: null,
            repair_chart: null,
            device_chart: null,
            line_chart: null,
            bar_chart: null,
            deviceList: [
                {
                    index: 0,
                    status: '在线',
                    num: '0',
                    desc: '0%',
                },
                {
                    index: 1,
                    status: '离线',
                    num: '0',
                    desc: '0%',
                },
                {
                    index: 2,
                    status: '未激活',
                    num: '0',
                    desc: '0%',
                },
                {
                    index: 3,
                    status: '故障',
                    num: '0',
                    desc: '0%',
                },
            ],
            useList: ['故障报修', '设备维修', '设备保养', '新增设备', '新增备件', '备件领用', '备件采购', '备件入库', '备件出库'],
            activeStatus: 'all',
            agencyList: [
                { name: '设备总数量', value: '0' },
                { name: '工单总数量', value: '0' },
                { name: '备件总数量', value: '0' },
                { name: '巡检总数量', value: '0' },
                { name: '已完成巡检', value: '0' },
                { name: '未完成巡检', value: '0' },
                { name: '维修总数量', value: '0' },
                { name: '已完成维修', value: '0' },
                { name: '未完成维修', value: '0' },
                { name: '保养总数量', value: '0' },
                { name: '已完成保养', value: '0' },
                { name: '未完成保养', value: '0' },
            ],
            repairList: [
                {
                    name: '已提交',
                    value: 0,
                },
                {
                    name: '未指派',
                    value: 0,
                },
                {
                    name: '未接单',
                    value: 0,
                },
                {
                    name: '处理中',
                    value: 0,
                },
                {
                    name: '未确定',
                    value: 0,
                },
                {
                    name: '已确定',
                    value: 0,
                },
                {
                    name: '已驳回',
                    value: 0,
                },
            ],
            repairCount: 0,
            repairOrderList: [
                { name: '已提交', value: '0' },
                { name: '未指派', value: '0' },
                { name: '未接单', value: '0' },
                { name: '处理中', value: '0' },
                { name: '未确定 ', value: '0' },
                { name: '已确定', value: '0' },
                { name: '已驳回', value: '0' },
            ],
            pieEquipentY: [
                { value: 0, name: '在线' },
                { value: 0, name: '离线' },
                { value: 0, name: '故障' },
                { value: 0, name: '未激活' },
            ],
            pieEquipentCount: 0,
            lineResoucess: {},
            lineDate: [],
        };
    },
    computed: {
        ...mapGetters(['sidebarRouters', 'sidebar']),

        isCollapse() {
            return !this.sidebar.opened;
        },
    },
    watch: {
        isCollapse() {
            this.resize();
        },
    },
    methods: {
        // 获取在线情况图表信息
        getStatisticNew() {
            getStatisticNew().then((res) => {
                //图表数据
                this.pieEquipentY[0].value = res.data.deviceOnlineCount;
                this.pieEquipentY[1].value = res.data.deviceOffLineCount;
                this.pieEquipentY[2].value = res.data.deviceBreakdownCount;
                this.pieEquipentY[3].value = res.data.deviceInactiveCount;
                this.pieEquipentCount = res.data.deviceOnlineCount + res.data.deviceOffLineCount + res.data.deviceBreakdownCount + res.data.deviceInactiveCount;
                //列表数据
                //数量
                this.deviceList[0].num = res.data.deviceOnlineCount;
                this.deviceList[1].num = res.data.deviceOffLineCount;
                this.deviceList[2].num = res.data.deviceInactiveCount;
                this.deviceList[3].num = res.data.deviceBreakdownCount;
                //占比
                this.deviceList[0].desc = ((res.data.deviceOnlineCount / this.pieEquipentCount) * 100).toFixed(2) + '%';
                this.deviceList[1].desc = ((res.data.deviceOffLineCount / this.pieEquipentCount) * 100).toFixed(2) + '%';
                this.deviceList[2].desc = ((res.data.deviceInactiveCount / this.pieEquipentCount) * 100).toFixed(2) + '%';
                this.deviceList[3].desc = ((res.data.deviceBreakdownCount / this.pieEquipentCount) * 100).toFixed(2) + '%';
                this.drawPie();
            });
        },
        getMaintainTasksDaoVoApi() {
            selectMaintainTasksDaoVoApi().then((res) => {
                this.agencyList = res.data;
            });
        },
        getdevOpsTaskAjax() {
            devOpsTaskAjaxApi().then((res) => {
                this.repairList = res.data;
                this.repairOrderList = res.data;
                //设备总数
                for (let key in res.data) {
                    this.repairCount += parseInt(res.data[key].value);
                }
                this.drawRepair();
            });
        },
        getList() {
            getOperationsituation({ dateType: this.lineType }).then((res) => {
                if (res.data) {
                    for (let obj in res.data) {
                        let xData = [];
                        let list = [];
                        for (let key in res.data[obj]) {
                            list.push(res.data[obj][key]);
                            xData.push(key);
                        }
                        this.lineResoucess[obj] = list;
                    }
                }
                this.lineDate = [];
                if (this.lineType == 1) {
                    this.lineDate = [
                        '00时',
                        '01时',
                        '02时',
                        '03时',
                        '04时',
                        '05时',
                        '06时',
                        '07时',
                        '08时',
                        '09时',
                        '10时',
                        '11时',
                        '12时',
                        '13时',
                        '14时',
                        '15时',
                        '16时',
                        '17时',
                        '18时',
                        '19时',
                        '20时',
                        '21时',
                        '22时',
                        '23时',
                    ];
                } else if (this.lineType == 2) {
                    for (let i = 1; i < 32; i++) {
                        this.lineDate.push(i + '日');
                    }
                } else {
                    this.lineDate = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                }
                //巡检
                this.drawDevice();
                this.drawLine();
                this.drawBar();
            });
        },
        drawPie() {
            // 基于准备好的dom，初始化echarts实例
            this.pie_chart = echarts.init(this.$refs.pieChart);
            var option;
            option = {
                title: {
                    text: this.pieEquipentCount,
                    textStyle: {
                        fontSize: 30,
                        lineHeight: 32,
                        fontWeight: 500,
                    },
                    subtext: '设备总数量',
                    subtextStyle: {
                        fontSize: 16,
                    },
                    left: 'center',
                    top: '35%',
                },
                color: this.colorList,
                grid: {
                    left: '20%',
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    show: false,
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        emphasis: {
                            disabled: true,
                        },
                        data: this.pieEquipentY,
                    },
                ],
            };
            this.pie_chart.setOption(option);
        },
        drawRepair() {
            // 基于准备好的dom，初始化echarts实例
            this.repair_chart = echarts.init(this.$refs.repairChart);
            var option;
            option = {
                title: {
                    text: this.repairCount,
                    textStyle: {
                        fontSize: 30,
                        lineHeight: 32,
                        fontWeight: 500,
                    },
                    subtext: '工单总数',
                    subtextStyle: {
                        fontSize: 16,
                    },
                    left: 'center',
                    top: '35%',
                },
                color: this.colorList,
                grid: {
                    left: '20%',
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    show: false,
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        emphasis: {
                            disabled: true,
                        },
                        data: this.repairList,
                    },
                ],
            };
            this.repair_chart.setOption(option);
        },
        drawDevice() {
            this.device_chart = echarts.init(this.$refs.deviceChart);
            var option;
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '100',
                    right: '40',
                    bottom: '40',
                    top: '10%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: this.lineDate,
                    axisLabel: {
                        fontSize: 12,
                        color: '#a8abb2',
                        lineHeight: 20,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                },
                series: [
                    {
                        type: 'bar',
                        color: '#C2D3FA',
                        data: this.lineResoucess['inspection'],
                    },
                ],
            };
            this.device_chart.setOption(option);
        },
        drawLine() {
            this.line_chart = echarts.init(this.$refs.lineChart);
            var option;
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '100',
                    right: '40',
                    bottom: '40',
                    top: '10%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: this.lineDate,
                    axisLabel: {
                        fontSize: 12,
                        color: '#a8abb2',
                        lineHeight: 20,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                },
                series: [
                    {
                        name: '正常',
                        type: 'line',
                        color: 'rgba(0, 201, 159, 0.4)',
                        data: this.lineResoucess['repair'],
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 201, 159, 0.4)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 201, 159, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.line_chart.setOption(option);
        },
        drawBar() {
            this.bar_chart = echarts.init(this.$refs.barChart);
            var option;
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '100',
                    right: '40',
                    bottom: '40',
                    top: '10%',
                },
                xAxis: {
                    type: 'category',
                    data: this.lineDate,
                    axisLabel: {
                        fontSize: 12,
                        color: '#a8abb2',
                        lineHeight: 20,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                },
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        color: '#F58080',
                        data: this.lineResoucess['upkeep'],
                        barWidth: 8,
                    },
                ],
            };
            this.bar_chart.setOption(option);
        },
        resize() {
            let scrollView = document.querySelector('.app-main'); //app-main的宽高
            if (this.$route.path != '/device-maintain/bigScreen2') {
                clearInterval(this.setInter);
                scrollView.style.transform = undefined;
                return;
            }
            let zoomValue = '';
            if (this.isCollapse) {
                zoomValue = (document.body.clientWidth - 50) / 1870;
            } else {
                zoomValue = (document.body.clientWidth - 200) / 1720;
            }
            scrollView.style.transform = `scale(${zoomValue})`;
            scrollView.style.transformOrigin = 'left top';
        },
    },
    mounted() {
        // this.getlineData();
        this.getStatisticNew();
        this.getMaintainTasksDaoVoApi();
        this.getdevOpsTaskAjax();
        this.getList();
        this.resize();
        window.onresize = () => {
            this.resize();
            if (this.bar_chart) {
                this.bar_chart.resize();
            }
            if (this.pie_chart) {
                this.pie_chart.resize();
            }
            if (this.repair_chart) {
                this.repair_chart.resize();
            }
            if (this.device_chart) {
                this.device_chart.resize();
            }
            if (this.line_chart) {
                this.line_chart.resize();
            }
        };
    },
    beforeDestroy() {
        clearInterval(this.setInter);
        let scrollView = document.querySelector('.app-main'); //app-main的宽高
        scrollView.style.transform = `scale(1 , 1)`;
    },
};
</script>

<style scoped>
@import './index.scss';
</style>
